<!DOCTYPE html>
<html lang="en" debug=true>
<head>
    <meta charset="utf-8"/>
    <title>lumt</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <!--<link rel="stylesheet" href="/statics/css/demo.css"/>-->
    <link rel="stylesheet" href="/statics/css/audioplayer.css"/>

    <script src="/statics/js/jquery.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        #wrapper {
            width: 100%;
            max-width: 500px;
            position: absolute;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
    <script>
        /*
         VIEWPORT BUG FIX
         iOS viewport scaling bug fix, by @mathias, @cheeaun and @jdalton
         */
        (function (doc) {
            var addEvent = 'addEventListener', type = 'gesturestart', qsa = 'querySelectorAll', scales = [1, 1], meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

            function fix() {
                meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
                doc.removeEventListener(type, fix, true);
            }

            if ((meta = meta[meta.length - 1]) && addEvent in doc) {
                fix();
                scales = [.25, 1.6];
                doc[addEvent](type, fix, true);
            }
        }(document));
    </script>
</head>
<body>

<div id="wrapper">
    <audio preload="auto" controls>
        <source src="http://luoo-mp3.kssws.ks-cdn.com/low/they/20140408.mp3">
    </audio>
    <script src="/statics/js/lumt-audioplayer.js"></script>
    <script>
        $(function () {
            $('audio').audioPlayer();
        });
    </script>
</div>

</body>
</html>